<!-- 该组件为多张图片上传组件,支持放大预览和删除,支持限制上传数量 -->
<template>
  <div>
    <el-upload
      action="#"
      list-type="picture-card"
      :auto-upload="true"
      :before-upload="beforeAvatarUpload"
      :http-request="uploadFn"
      :disabled="uploadDisabled"
      :limit="limit"
      :on-exceed="exceLimitFn"
      :file-list="fileListDetail"
      :class="{ hideUploadBtn: fileListDetail.length >= limit || viewOnly }"
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{ file }">
        <el-image
          class="el-upload-list__item-thumbnail"
          ref="preview"
          :src="file.url"
          :preview-src-list="[dialogImageUrl]"
          alt=""
        ></el-image>
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>

          <span
            v-if="!uploadDisabled && viewOnly == false"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <!-- <el-dialog
      :visible.sync="dialogVisible"
      :modal-append-to-body="false"
      append-to-body
    >
      <el-image
        :preview-src-list="[dialogImageUrl]"
        style="width: 100%"
        :src="dialogImageUrl"
        fit="contain"
        alt=""
      />
    </el-dialog> -->
  </div>
</template>

<script>
import { postUpload } from "@/api/management/user";
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      uploadDisabled: false,

      // fileListDetail: [],
    };
  },
  computed: {
    baseUrl() {
      return this.$store.getters.baseUrl;
    },
  },
  props: {
    limit: {
      type: Number,
      default: 3,
    },
    // 附件回显数组(需要加上baseUrl)
    fileListDetail: {
      type: Array,
      default: () => [],
    },
    // 附件接口数组(无需http前缀)
    fileList: {
      type: Array,
      default: () => [],
    },
    viewOnly: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    fileListDetail: {
      handler(newl, old) {
        if (newl.length >= 3) {
          this.uploadDisabled = true;
        } else {
          this.uploadDisabled = false;
        }
      },
      immediate: true,
    },
    viewOnly: {
      handler(newl, old) {
        if (newl) {
          this.uploadDisabled = true;
        } else {
          this.uploadDisabled = false;
        }
      },
    },
  },
  methods: {
    // 上传前
    beforeAvatarUpload(file) {
      console.log("上传前", file);
    },
    async uploadFn(file) {
      let FD = new FormData();
      FD.append(`file`, file.file);
      let data = await postUpload(FD);
      if (data.code == 0 && data.data.bcode == 0) {
        this.imageUrl = this.baseUrl + data.data.bdata[1];
        //这个数组用于传入接口
        this.fileList.push({
          file: file.file,
          url: data.data.bdata[1],
        });
        // console.log("上传成功", data, file);
        // 把上传成功的地址后缀传递出去,用于回显
        this.fileListDetail.push({
          name: file.name,
          url: this.imageUrl || data.data.bdata[1],
        });

        this.$emit("uploadImg", {
          huixianArr: this.fileListDetail,
          jiekouArr: this.fileList,
        });
      }
    },
    handleRemove(file) {
      // console.log("移除", file, this.fileListDetail);
      this.fileListDetail.forEach((item, index) => {
        if (item.uid == file.uid) {
          this.fileListDetail.splice(index, 1);
          this.fileList.splice(index, 1);
          this.$emit("uploadImg", {
            huixianArr: this.fileListDetail,
            jiekouArr: this.fileList,
          });
        }
      });
    },
    handlePictureCardPreview(file) {
      // console.log("预览", file);
      this.dialogImageUrl = file.url;
      this.$refs.preview.clickHandler();
      // this.dialogVisible = true;
    },
    exceLimitFn(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${fileList.length} 个文件`
      );
      // 这里可以根据需要决定是否隐藏上传按钮
      // 例如，你可以设置一个数据属性来控制按钮的显示状态
      this.uploadDisabled = true;
    },
  },
};
</script>
<style lang="scss" scoped>
// .upload {
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   ::v-deep {
//     .avatar-uploader .el-upload {
//       border: 1px dashed #d9d9d9;
//       border-radius: 6px;
//       cursor: pointer;
//       position: relative;
//       overflow: hidden;
//     }
//     .avatar-uploader .el-upload:hover {
//       border-color: #409eff;
//     }
//     .avatar-uploader-icon {
//       font-size: 28px;
//       color: #8c939d;
//       width: 178px;
//       height: 178px;
//       line-height: 178px;
//       text-align: center;
//     }
//     .avatar {
//       width: 178px;
//       height: 178px;
//       display: block;
//     }
//   }
// }
::v-deep .el-dialog__header {
  border-bottom: none !important;
}
::v-deep .hideUploadBtn .el-upload--picture-card {
  display: none;
}
</style>
